class Options{
    constructor(){
        this.list=document.querySelector('.list')
        this.options=document.querySelector('.options')
        this.li=document.querySelectorAll('.list>ul>li')
        this.render()
    }   
    render(){
        // 手机专区
        this.li[0].onmouseover=()=>{
            this.options.innerHTML=
            `
             <li>
            <img src="./img/shouji.png" alt="">
        <div class="describe">
            <p>mate系列</p>
            <p>p系列</p>
            <p>nova系列</p>
            <p>畅享系列</p>
            <p>华为认证二手机</p>
        </div>
        </li> 
            `
            this.options.style.display='block'
            this.options.onmouseover=()=>{
                this.options.style.display='block'
                this.li[0].onmouseout=()=>{
                    this.options.style.display='none'
                }
                this.options.onmouseout=()=>{
                    this.options.style.display='none'
                }
            }
            
        }
        // 电脑专区
        this.li[1].onmouseover=()=>{
            this.options.innerHTML=
            `
             <li>
            <img src="./img/diannao1.png" alt="">
        <div class="describe">
            <p>Mate BookX系列</p>
            <p>Mate Book系列</p>
            <p>Mate BookD系列</p>
            <p>Mate BookE系列</p>
            <p>商用电脑</p>
        </div>
        </li> 
        <li >
            <img src="./img/diannao2.png" alt="">
        <div class="describe">
            <p>显示器</p>
            <p>台式机</p>
            <p>打印机</p>
            <p>配件</p>
            <p>电脑包</p>
        </div>
        </li> 

            `
            this.options.style.display='block'
            this.options.onmouseover=()=>{
                this.options.style.display='block'
                this.li[1].onmouseout=()=>{
                    this.options.style.display='none'
                }
                this.options.onmouseout=()=>{
                    this.options.style.display='none'
                }
            }
            
        }
        // 平板专区
        this.li[2].onmouseover=()=>{
            this.options.innerHTML=
            `
             <li>
            <img src="./img/pingban1.png" alt="">
        <div class="describe">
            <p>MatePad Pro系列</p>
            <p>MatePad系列</p>
            <p>墨水平板</p>
            <p>Mate BookE系列</p>
            <p>M系列和畅享平板</p>
        </div>
        </li> 
        <li >
            <img src="./img/zhihuipin1.png" alt="">
        <div class="describe">
            <p>商用平板</p>
            <p>配件</p>
            <p>墨水平板</p>
            <p>Mate BookE系列</p>
            <p>M系列和畅享平板</p>
        </div>
        </li> 

            `
            this.options.style.display='block'
            this.options.onmouseover=()=>{
                this.options.style.display='block'
                this.li[2].onmouseout=()=>{
                    this.options.style.display='none'
                }
                this.options.onmouseout=()=>{
                    this.options.style.display='none'
                }
            }
            
        }
        // 智慧屏专区
        this.li[3].onmouseover=()=>{
            this.options.innerHTML=
            `
             <li>
            <img src="./img/zhihuipin1.png" alt="">
        <div class="describe">
            <p>智慧屏 V Pro</p>
            <p>智慧屏V系列</p>
            <p>华为智慧屏 SE MEMC</p>
            <p>华为智慧屏 SE</p>
            <p>智慧屏S系列</p>
        </div>
        </li> 
        <li >
            <img src="./img/shouji.png" alt="">
        <div class="describe">
            <p>商用智慧屏</p>
            <p>配件</p>
            <p>办公协作大屏</p>
            <p>Mate BookE系列</p>
            <p>M系列和畅享平板</p>
        </div>
        </li> 
            `
            this.options.style.display='block'
            this.options.onmouseover=()=>{
                this.options.style.display='block'
                this.li[3].onmouseout=()=>{
                    this.options.style.display='none'
                }
                this.options.onmouseout=()=>{
                    this.options.style.display='none'
                }
            }
            
        }
        // 穿戴区
        this.li[4].onmouseover=()=>{
            this.options.innerHTML=
            `
             <li>
            <img src="./img/chuandai1.png" alt="">
        <div class="describe">
            <p>智慧屏 V Pro</p>
            <p>智慧屏V系列</p>
            <p>华为智慧屏 SE MEMC</p>
            <p>华为智慧屏 SE</p>
            <p>智慧屏S系列</p>
        </div>
        </li> 
        <li >
            <img src="./img/chuandai1.png" alt="">
        <div class="describe">
            <p>商用智慧屏</p>
            <p>配件</p>
            <p>办公协作大屏</p>
            <p>Mate BookE系列</p>
            <p>M系列和畅享平板</p>
        </div>
        </li> 
            `
            this.options.style.display='block'
            this.options.onmouseover=()=>{
                this.options.style.display='block'
                this.li[4].onmouseout=()=>{
                    this.options.style.display='none'
                }
                this.options.onmouseout=()=>{
                    this.options.style.display='none'
                }
            }
            
        }
        // 耳机音箱
        this.li[5].onmouseover=()=>{
            this.options.innerHTML=
            `
             <li>
            <img src="./img/erji1.png" alt="">
        <div class="describe">
            <p>智慧屏 V Pro</p>
            <p>智慧屏V系列</p>
            <p>华为智慧屏 SE MEMC</p>
            <p>华为智慧屏 SE</p>
            <p>智慧屏S系列</p>
        </div>
        </li> 
        <li >
            <img src="./img/erji1.png" alt="">
        <div class="describe">
            <p>商用智慧屏</p>
            <p>配件</p>
            <p>办公协作大屏</p>
            <p>Mate BookE系列</p>
            <p>M系列和畅享平板</p>
        </div>
        </li> 
            `
            this.options.style.display='block'
            this.options.onmouseover=()=>{
                this.options.style.display='block'
                this.li[3].onmouseout=()=>{
                    this.options.style.display='none'
                }
                this.options.onmouseout=()=>{
                    this.options.style.display='none'
                }
            }
            
        }
        // 门锁路由
        this.li[6].onmouseover=()=>{
            this.options.innerHTML=
            `
             <li>
            <img src="./img/mensuo.png" alt="">
        <div class="describe">
            <p>智慧屏 V Pro</p>
            <p>智慧屏V系列</p>
            <p>华为智慧屏 SE MEMC</p>
            <p>华为智慧屏 SE</p>
            <p>智慧屏S系列</p>
        </div>
        </li> 
        <li >
            <img src="./img/mensuo.png" alt="">
        <div class="describe">
            <p>商用智慧屏</p>
            <p>配件</p>
            <p>办公协作大屏</p>
            <p>Mate BookE系列</p>
            <p>M系列和畅享平板</p>
        </div>
        </li> 
            `
            this.options.style.display='block'
            this.options.onmouseover=()=>{
                this.options.style.display='block'
                this.li[3].onmouseout=()=>{
                    this.options.style.display='none'
                }
                this.options.onmouseout=()=>{
                    this.options.style.display='none'
                }
            }
            
        }
        // 配件
        this.li[7].onmouseover=()=>{
            this.options.innerHTML=
            `
             <li>
            <img src="./img/peijian1.png" alt="">
        <div class="describe">
            <p>智慧屏 V Pro</p>
            <p>智慧屏V系列</p>
            <p>华为智慧屏 SE MEMC</p>
            <p>华为智慧屏 SE</p>
            <p>智慧屏S系列</p>
        </div>
        </li> 
        <li >
            <img src="./img/peijian2.png" alt="">
        <div class="describe">
            <p>商用智慧屏</p>
            <p>配件</p>
            <p>办公协作大屏</p>
            <p>Mate BookE系列</p>
            <p>M系列和畅享平板</p>
        </div>
        </li> 
            `
            this.options.style.display='block'
            this.options.onmouseover=()=>{
                this.options.style.display='block'
                this.li[3].onmouseout=()=>{
                    this.options.style.display='none'
                }
                this.options.onmouseout=()=>{
                    this.options.style.display='none'
                }
            }
            
        }
        // 生态产品
        this.li[8].onmouseover=()=>{
            this.options.innerHTML=
            `
             <li>
            <img src="./img/shengtai1.png" alt="">
        <div class="describe">
            <p>智慧屏 V Pro</p>
            <p>智慧屏V系列</p>
            <p>华为智慧屏 SE MEMC</p>
            <p>华为智慧屏 SE</p>
            <p>智慧屏S系列</p>
        </div>
        </li> 
        <li >
            <img src="./img/shengtai2.png" alt="">
        <div class="describe">
            <p>商用智慧屏</p>
            <p>配件</p>
            <p>办公协作大屏</p>
            <p>Mate BookE系列</p>
            <p>M系列和畅享平板</p>
        </div>
        </li> 
            `
            this.options.style.display='block'
            this.options.onmouseover=()=>{
                this.options.style.display='block'
                this.li[3].onmouseout=()=>{
                    this.options.style.display='none'
                }
                this.options.onmouseout=()=>{
                    this.options.style.display='none'
                }
            }
            
        }
        // 家用电器
        this.li[9].onmouseover=()=>{
            this.options.innerHTML=
            `
             <li>
            <img src="./img/jiayong.png" alt="">
        <div class="describe">
            <p>智慧屏 V Pro</p>
            <p>智慧屏V系列</p>
            <p>华为智慧屏 SE MEMC</p>
            <p>华为智慧屏 SE</p>
            <p>智慧屏S系列</p>
        </div>
        </li> 
        <li >
            <img src="./img/jiayong2.png" alt="">
        <div class="describe">
            <p>商用智慧屏</p>
            <p>配件</p>
            <p>办公协作大屏</p>
            <p>Mate BookE系列</p>
            <p>M系列和畅享平板</p>
        </div>
        </li> 
            `
            this.options.style.display='block'
            this.options.onmouseover=()=>{
                this.options.style.display='block'
                this.li[3].onmouseout=()=>{
                    this.options.style.display='none'
                }
                this.options.onmouseout=()=>{
                    this.options.style.display='none'
                }
            }
            
        }
        // 美食酒饮
        this.li[10].onmouseover=()=>{
            this.options.innerHTML=
            `
             <li>
            <img src="./img/meishi.png" alt="">
        <div class="describe">
            <p>智慧屏 V Pro</p>
            <p>智慧屏V系列</p>
            <p>华为智慧屏 SE MEMC</p>
            <p>华为智慧屏 SE</p>
            <p>智慧屏S系列</p>
        </div>
        </li> 
        <li >
            <img src="./img/meishi.png" alt="">
        <div class="describe">
            <p>商用智慧屏</p>
            <p>配件</p>
            <p>办公协作大屏</p>
            <p>Mate BookE系列</p>
            <p>M系列和畅享平板</p>
        </div>
        </li> 
            `
            this.options.style.display='block'
            this.options.onmouseover=()=>{
                this.options.style.display='block'
                this.li[3].onmouseout=()=>{
                    this.options.style.display='none'
                }
                this.options.onmouseout=()=>{
                    this.options.style.display='none'
                }
            }
            
        }
        // 增值服务/企业商用
        this.li[11].onmouseover=()=>{
            this.options.innerHTML=
            `
             <li>
            <img src="./img/zengzhi1.png" alt="">
        <div class="describe">
            <p>智慧屏 V Pro</p>
            <p>智慧屏V系列</p>
            <p>华为智慧屏 SE MEMC</p>
            <p>华为智慧屏 SE</p>
            <p>智慧屏S系列</p>
        </div>
        </li> 
        <li >
            <img src="./img/zengzhi2.png" alt="">
        <div class="describe">
            <p>商用智慧屏</p>
            <p>配件</p>
            <p>办公协作大屏</p>
            <p>Mate BookE系列</p>
            <p>M系列和畅享平板</p>
        </div>
        </li> 
            `
            this.options.style.display='block'
            this.options.onmouseover=()=>{
                this.options.style.display='block'
                this.li[3].onmouseout=()=>{
                    this.options.style.display='none'
                }
                this.options.onmouseout=()=>{
                    this.options.style.display='none'
                }
            }
            
        }
    }
}
new Options()